<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
	.tab{
		width: 600px;
		margin: 10px auto;
/*		background: pink;*/

	}
	.title span{
		float: left;
		width: 200px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid #000;
		box-sizing:border-box;
	}
	.title .active{
		background: orange;
		color: #fff;
	}
	.content p{
		width: 600px;
		height: 200px;
		line-height: 200px;
		text-align: center;
		border: 1px solid #000;
		box-sizing:border-box;
		display: none;
	}
	.content .select{
		display: block;
	}
	</style>
</head>
<body>
	<div class="tab">
		<div class="title">
			<span class="active">标题一</span>
			<span>标题二</span>
			<span>标题三</span>
		</div>
		<div class="content">
			<p class="select">内容1</p>
			<p>内容2</p>
			<p>内容3</p>
		</div>
	</div>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
    <script type="text/javascript">
        // 给标题绑定点击事件
        $('.title span').click(function() {
            // 添加激活类并移除兄弟元素的激活类
            $(this).addClass('active').siblings().removeClass('active');
            
            // 显示对应内容并隐藏其他内容
            $('.content p').eq($(this).index()).addClass('select')
                .siblings().removeClass('select');
        });
    </script>											  
</body>
</html>